<template>
    <el-form
        class="content_drawer_form"
        :rules="rules"
        ref="ruleForm"
        :model="form"
        label-width="80px"
        :disabled="isTask"
    >
        <el-form-item label="标题" prop="title">
            <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="请假原因" prop="reason">
            <el-input v-model="form.reason"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="leaveStartTime">
            <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.leaveStartTime"
                style="width: 100%"
            ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="leaveEndTime">
            <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.leaveEndTime"
                style="width: 100%"
            ></el-date-picker>
        </el-form-item>
        <el-form-item label="请假类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择请假类型">
                <el-option label="事假" value="1"></el-option>
                <el-option label="病假" value="2"></el-option>
                <el-option label="年假" value="3"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script>
import { putLeave } from "@/api/workflow/leave";
import { parseTime } from "@/utils/utils";
export default {
    props: ["remark"],
    data() {
        return {
            form: {
                title: "",
                reason: "",
                leaveStartTime: "",
                endTime: "",
                type: "",
            },
            rules: {
                reason: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur",
                    },
                ],
                title: [
                    {
                        required: true,
                        message: "请选择活动区域",
                        trigger: "change",
                    },
                ],
                leaveStartTime: [
                    {
                        required: true,
                        message: "请选择日期",
                        trigger: "change",
                    },
                ],
                leaveEndTime: [
                    {
                        required: true,
                        message: "请选择时间",
                        trigger: "change",
                    },
                ],
                type: [
                    {
                        required: true,
                        message: "请至少选择一个活动性质",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    mounted() {
        this.getFormData();
    },
    computed: {
        isTask() {
            return this.$store.state.workflow.formType.includes("task");
        },
    },
    methods: {
        //获取回显数据
        getFormData() {
            if (this.$store.state.workflow.businessConfig.formData) {
                this.form = this.$store.state.workflow.businessConfig.formData;
            }
        },
        //获取表单数据
        getFormParams() {
            return new Promise((resolve, reject) => {
                this.$refs.ruleForm.validate((e) => {
                    if (e) {
                        this.form.leaveStartTime = parseTime(
                            this.form.leaveStartTime,
                            "{y}-{m}-{d} {h}:{i}:{s}"
                        );
                        this.form.leaveEndTime = parseTime(
                            this.form.leaveEndTime,
                            "{y}-{m}-{d} {h}:{i}:{s}"
                        );
                        resolve(true);
                    } else {
                        reject(false);
                    }
                });
            });
        },
        //发起流程
        async submit() {
            const res = await this.getFormParams();
            if (!res) {
                return;
            }
            const data = {
                businessType: "0",
                createBy: "",
                createName: "",
                createTime: "",
                id: "",
                instanceId: "",
                leaveEndTime: this.form.leaveEndTime,
                leaveStartTime: this.form.leaveStartTime,
                modelId: this.$store.state.workflow.businessConfig.id,
                params: {},
                reason: this.form.reason,
                remark: this.remark,
                searchValue: "",
                state: "",
                taskName: "",
                title: this.form.title,
                type: this.form.type,
                updateBy: "",
                updateTime: "",
            };
            putLeave(data).then((res) => {
                if (res.code === 200) {
                    this.$message({
                        message: "发起流程成功！",
                        type: "success",
                    });
                    this.$store.commit("workflow/SET_BUSINESSDRAWER", false);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
    border-top: 1px solid #e4e7ed;
    padding-right: 30px;
    padding: 10px;
}
.content_drawer {
    padding: 10px 0;
    height: 80%;
    overflow: auto;
    display: flex;
    justify-content: space-around;
    .content_drawer_form {
        padding: 0 20px;
        flex: 1;
    }
    .content_drawer_timeLine {
        width: 20%;
        .item_permission {
            font-size: 12px;
            color: #999;
        }
    }
    .el-form--label-left {
        width: 70%;
    }
}
</style>
